@import "utils";
.Button {
  display: flex-inline;
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  line-height: 0.875rem;
  font-size: 0.875rem;
  cursor: pointer;
  &.default {
    background: $oc-violet-5;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background ease-in 0.125s;
    &:hover {
      background: $oc-violet-4;
    }
    &:active {
      background: $oc-violet-5;
    }
    &.cancel {
      background: $oc-gray-7;
      color: white;
      &:hover {
        background: $oc-gray-6;
      }
      &:active {
        background: $oc-gray-7;
      }
    }
  }
  &.gray {
    border-radius: 4px;
    background: $oc-gray-8;
    color: white;
    &:hover {
      background: $oc-gray-7;
    }
    &:active {
      background: $oc-gray-9;
    }
  }
  &.outline {
    border-radius: 4px;
    border: 1px solid $oc-gray-7;
    color: $oc-gray-7;
    background: white;
    font-weight: 400;
    transition: all ease-in 0.125s;
    &:hover {
      border: 1px solid $oc-violet-4;
      color: $oc-violet-5;
      cursor: pointer;
    }
    &.red {
      border: 1px solid $oc-red-8;
      color: $oc-red-8;
      font-weight: 500;
      &:hover {
        color: white;
        background: $oc-red-6;
        border: 1px solid $oc-red-6;
      }
      &:active {
        background: $oc-red-7;
        border: 1px solid $oc-red-7;
      }
    }
  }
  &.paper {
    @include common-button-style();
    @include material-shadow(2, 0.3);
    background: white;
    transition: all 0.1s ease-in;
    color: $oc-gray-8;
    &.violetFont {
      color: $oc-violet-5;
    }
    &:hover {
      background: $oc-gray-0;
      @include material-shadow(2, 0.75);
    }
  }
  &.fullWidth {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  &.large {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.25rem;
  }
  &.transparent {
    color: $oc-gray-8;
    border-radius: 4px;
    &:hover {
      background: rgba(0, 0, 0, 0.03);
    }
    &:active {
      background: rgba(0, 0, 0, 0.07);
    }
  }
}

.Button+.Button {
  margin-left: 0.5rem;
}